import React,{useEffect,useState} from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as  api from "../../api/index"
import {anyAction} from "../../untils/index"
type Props = {}

const Myuser = (props: Props) => {
  const dispatch:anyAction=useDispatch()
  const data=useSelector((state:anyAction)=>{
   return state.reducer.data
  })
  useEffect(()=>{
   dispatch(api.getlist())
  },[])
  const childrenData=useSelector((state:anyAction)=>{
    return state.reducer.childrenData
   })
   const add_active=(e:anyAction,item:anyAction)=>{
    console.log(1);
    
   dispatch(api.show_item(item))
   }
   const del_active=(e:anyAction,item:anyAction)=>{
    console.log(2);
    
    dispatch(api.show_item(item))
    }
  return (
    <div className='box'>
    <div className="left">
     {
      data&&data.map((item:anyAction,index:number)=>{
        return <li 
        key={index} 
        className={item.flag?"active":""}
        
        onMouseLeave={(e)=>del_active(e,item)}
        onMouseEnter={(e)=>add_active(e,item)}
        >{item.title}</li>
      
      })
     }
    </div>
    <div className="right">
    {
      childrenData&&childrenData.map((item:anyAction,index:number)=>{
        return <div key={index} >
          <p> {item.title}</p>
          <p><img src={item.img} alt="图片错误" /></p>
          </div>
      
      })
     }
    </div>
    </div>
  )
}

export default Myuser